﻿
@{
    ViewData["Title"] = "用户登录";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style scoped>
    .login-container {
        width: 100%;
        height: 100%;
    }

    .login-page {
        -webkit-border-radius: 5px;
        border-radius: 5px;
        margin: 180px auto;
        width: 350px;
        padding: 35px 35px 15px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }

    label.el-checkbox.rememberme {
        margin: 0px 0px 15px;
        text-align: left;
    }
</style>
<div class="login-container" id="applogin">
    <el-form :model="loginForm" :rules="loginFormRules"
             status-icon
             ref="loginFormRules"
             label-position="left"
             label-width="0px"
             class="demo-ruleForm login-page">
        <h3 class="title">系统登录</h3>
        <el-form-item prop="username">
            <el-input type="text"
                      v-model="loginForm.username"
                      auto-complete="off"
                      placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input type="password"
                      v-model="loginForm.password"
                      auto-complete="off"
                      placeholder="密码"></el-input>
        </el-form-item>
        @*<el-checkbox v-model="checked"  class="rememberme">记住密码</el-checkbox>*@
        <el-form-item style="width:100%;">
            <el-button type="primary" style="width:100%;" v-on:click="handleSubmit" :loading="logining">登录</el-button>
        </el-form-item>
    </el-form>
</div>
<script>
    new Vue({
        el: '#applogin',
        data() {
            return {
                logining: false,
                loginForm: {
                    username: 'admin',
                    password: '123456',
                },
                loginFormRules: {
                    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                    password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
                },
                checked: false
            }
        },
        methods: {
            handleSubmit(event) {
                var _this = this;
                _this.$refs.loginFormRules.validate((valid) => {

                    if (!valid) {
                        _this.logining = false;
                        return false;
                    }
                    _this.logining = true;
                    _this.$post("@Url.Action("userlogin", "account")", {
                        username: _this.loginForm.username,
                        password: _this.loginForm.password
                    }).then((res) => {
                        if (res.success == false) {
                            _this.$failed(res.message);
                            _this.logining = false;
                            return;
                        }
                        _this.$success(res.message, function () {
                            _this.setCookie("authuser", res.data.token);
                            var returnurl = getQueryString("returnurl");
                            if (returnurl != null && returnurl != "") {
                                window.location.href = returnurl;
                                return;
                            }
                            window.location.href = "@Url.Action("index","home")";
                        });
                    });
                })
            }
        }
    });
</script>











@*<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Insert title here</title>
        <link rel="stylesheet" href="//unpkg.com/element-ui@1.3.6/lib/theme-default/index.css" rel="external nofollow">
        <script type="text/javascript" src="vue/dist/vue.js"></script>
        <script type="text/javascript" src="element-ui/lib/index.js"></script>
        <script type="text/javascript" src="jquery/jquery-3.1.1.js"></script>
        <style>
            .el-row {
                margin-bottom: 20px;
            }

            .login-box {
                margin-top: 20%;
                margin-left: 40%;
            }
        </style>
    </head>
    <body>
        <div class="login-box" id="applogin">
            <el-row>
                <el-col :span="8">
                    <el-input id="name" v-model="name" placeholder="请输入帐号">
                        <template slot="prepend">
                            帐号
                        </template>
                    </el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-input id="password" v-model="password" type="password" placeholder="请输入密码">
                        <template slot="prepend">
                            密码
                        </template>
                    </el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-button id="login" v-on:click="check" style="width:100%" type="primary">登录</el-button>
                </el-col>
            </el-row>
        </div>
        <script type="text/javascript">
            new Vue({
                el: '#applogin',
                data: {
                    name: '',
                    password: ''
                },
                methods: {
                    check: function (event) {
                        //获取值
                        var name = this.name;
                        var password = this.password;
                        if (name == '' || password == '') {
                            this.$message({
                                message: '账号或密码为空！',
                                type: 'error'
                            })
                            return;
                        }
                        $.ajax({
                            url: 'login',
                            type: 'post',
                            data: {
                                name: name,
                                password: password
                            },
                            success: function (data) {
                                var result = data.result;
                                if (result == 'true' || result == true) {
                                    alert("登录成功");
                                } else {
                                    alert("登录失败");
                                }
                            },
                            error: function (data) {
                                alert(data);
                            },
                            dataType: 'json',
                        })
                    }
                }
            })

        </script>
    </body>

    </html>*@

